<template>
  <waterfall :col="2" :data="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]">
    <div
      class="pr pbImgBox"
      v-for="datas in arr21"
      :key="datas.id"
      @click="funass(datas.id)"
    >
      <img :src="datas.imgs" /><br />

      <div class="use">
        <div class="idname">{{ datas.rich }}</div>

        <div class="name">
          <p>
            <span class="pet"><img :src="datas.head" alt="" /></span>
            {{ datas.pet }}
          </p>
          <span class="iconfont icon-xingxing"> {{ datas.num }}</span>
        </div>
      </div>
    </div>
    <!-- <div class="pr pbImgBox" v-for="datas in arr2" :key="datas.id">
      <img :src="datas.img" />
    </div> -->
  </waterfall>
</template>

<script>
export default {
  created() {
    // if (sessionStorage.getItem("store")) {
    //   this.$store.replaceState(
    //     Object.assign(
    //       {},
    //       this.$store.state,
    //       JSON.parse(sessionStorage.getItem("store"))
    //     )
    //   );
    // }

    // window.addEventListener("beforeunload", () => {
    //   sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    // });
  
    this.$store.dispatch("getaxios", { url: "/data/one" });
  },
  computed: {
    arr21() {
      return this.$store.state.Home.arr1;
    },
  },
  methods: {
    funass(id) {
      console.log("我是点击的id",id);
      this.$router.push({ name: "xiangqing", params: { xx: id } });
    },
  },
};
</script>

<style scoped>
.waterfull {
  width: 100%;
}
.pbImgBox {
  margin-left: 0.12rem;
}
img {
  width: 1.6rem;
  border-radius: 0.12rem;
}
.use {
  width: 1.6rem;
  /* height: 0.54rem; */
  background-color: white;
}
.use .idname {
  width: 100%;
  height: 100%;
  font-size: 0.12rem;
  padding: 0.1rem 0 0.11rem 0.08rem;
  box-sizing: border-box;
}

.use .name {
  width: 100%;
  display: flex;
  padding: 0 0 0.08rem 0.1rem;
  box-sizing: border-box;
  justify-content: space-between;
}
.use p {
  width: 0.98rem;
  height: 0.15rem;
  font-size: 0.1rem;
  overflow: hidden;
  line-height: 0.15rem;
  display: flex;
  color: #c2c2c2;
}
.use p .pet {
  width: 0.14rem;
  height: 0.14rem;
  display: block;
  background-color: aqua;
  border-radius: 100%;
  overflow: hidden;
  margin-right: 0.05rem;
}
.use p .pet img {
  width: 100%;
  height: 100%;
}
.icon-xingxing {
  font-size: 0.1rem;
  color: #c2c2c2;
}
</style>
